<!--
 * @Author: 赖钊亮
 * @Date: 2020-06-28 14:20:39
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditTime: 2020-07-08 10:27:02
=======
 * @LastEditTime: 2020-07-03 10:15:02
>>>>>>> 155cd16fa6296e69859a8578ea009b7a77c3ba24
=======
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditTime: 2020-07-01 15:33:51
=======
 * @LastEditTime: 2020-07-01 17:28:16
>>>>>>> b5fa0090977597b5b3a29b6c4a2b5f7bbcc9a802
=======
 * @LastEditTime: 2020-07-02 12:57:08
>>>>>>> e4a6ab53a7784521de9a28ee63b2aef2478a5413
>>>>>>> 1d444a69c8425a04d850b9e31b457b3410fc29f2
 * @LastEditors: Please set LastEditors
 * @Description: 我的订单
 * @FilePath: \mobile_item_121e:\靖凯商场\jingkai_shopping_mall\jkshooping\src\pages\user\components\order.vue
--> 
<template>
  <div>
    <!-- 有token的状态 -->
    <template v-if="token">
      <!-- 我的订单 -->
      <div class="order">
        <!-- 我的订单标题 -->
        <div class="Myorder">
          <span class="My">我的订单</span>
          <router-link to="my/orders">
            <span class="whole">查看全部></span>
          </router-link>
        </div>
        <!-- 订单菜单栏 -->
        <div class="menu">
          <van-grid :column-num="5" :border="false">
            <van-grid-item icon="balance-o" text="待付款" :to="{path:'/my/orders',query:{active:1}}"/>
            <van-grid-item icon="bag-o" text="待发货" :to="{path:'/my/orders',query:{active:2}}"/>
            <van-grid-item icon="logistics" text="配送中" badge="5" :to="{path:'/my/orders',query:{active:3}}"/>
            <van-grid-item icon="like-o" text="待评价" @click="noOrders"/>
            <van-grid-item icon="service-o" text="售后中" :to="{path:'/my/orders',query:{active:4}}"/>
          </van-grid>
        </div>
        <!-- 积分 -->
        <div class="integral">
          <div class="Myintegral">
            <!-- 左边 -->
            <div class="left" @click="integral">
              <p class="num">{{this.integral1.integral}}</p>
              <p>我的积分</p>
            </div>
            <!-- 右边 -->
            <div class="right" @click="collection" >
              <p class="num">0</p>
              <p>我的收藏</p>
            </div>
          </div>
          <!-- 积分图片 -->
          <div class="integralImg">
            <van-image :src="datass.img_path" />
          </div>
          <!-- 积分菜单栏 -->
          <div class="integralmenu">
            <van-grid>
              <van-grid-item icon="vip-card-o" text="会员中心" @click="vip" />
              <van-grid-item icon="location-o" text="收货信息" to="/receipt" />
              <van-grid-item icon="service-o" text="我的客服" @click="service" />
              <van-grid-item icon="flower-o" text="帮助中心" @click="help" />
            </van-grid>
          </div>
        </div>
      </div>
    </template>
    <!-- 没有token的状态 -->
    <template v-else>
      <div class="order">
        <!-- 我的订单标题 -->
        <div class="Myorder">
          <span class="My">我的订单</span>
          <router-link to="my/orders">
            <span class="whole">查看全部></span>
          </router-link>
        </div>

        <!-- 积分菜单栏 -->
        <div class="integralmenu">
          <van-grid>
            <van-grid-item icon="vip-card-o" text="会员中心" @click="vip" />
            <van-grid-item icon="location-o" text="收货信息" />
            <van-grid-item icon="service-o" text="我的客服" @click="service" />
            <van-grid-item icon="flower-o" text="帮助中心" @click="help" />
          </van-grid>
          <!-- 订单菜单栏 -->
          <div class="menu">
            <van-grid :column-num="5" :border="false">
              <van-grid-item icon="balance-o" text="待付款" />
              <van-grid-item icon="bag-o" text="待发货" />
              <van-grid-item icon="logistics" text="配送中" badge="5" />
              <van-grid-item icon="like-o" text="待评价" />
              <van-grid-item icon="service-o" text="售后中" />
            </van-grid>
          </div>
          <!-- 积分 -->
          <div class="integral">
            <div class="Myintegral">
              <!-- 左边 -->
              <div class="left">
                <p class="num">111</p>
                <p>我的积分</p>
              </div>
              <!-- 右边 -->
              <div class="right">
                <p class="num">111</p>
                <p>我的收藏</p>
              </div>
            </div>
            <!-- 积分图片 -->
            <div class="integralImg">
              <van-image :src="datass.img_path" />
            </div>
            <!-- 积分菜单栏 -->
            <div class="integralmenu">
              <van-grid>
                <van-grid-item icon="vip-card-o" text="会员中心" />
                <van-grid-item icon="location-o" text="收货信息" />
                <van-grid-item icon="service-o" text="我的客服" />
                <van-grid-item icon="flower-o" text="帮助中心" />
              </van-grid>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
 
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("userModule");
import * as api1 from "@/api/apiList/system/system.js";
import * as API from "@/api/apiList/user/collect/collect.js";
import * as APi from "@/api/apiList/user/user.js";
import qs from "qs";
export default {
  data() {
    return {
      datass: [], //积分图片数据
      integral1: "", //积分信息
      collect: ""
    };
  },

  methods: {
    // token
    ...mapState(["token"]),
    //积分图片
    async API_ad() {
      let params = {
        position: "2"
      };
      return await api1.ad(qs.parse(params));
    },
    async API_collect() {
      return await API.collect();
    },
    // 获取积分数量
    async API_userIntegral() {
      return await APi.userIntegral();
    },
    // 跳转到我的积分界面
    integral() {
      this.$router.push("/integral");
    },
    //跳转到会员中心界面
    vip() {
      this.$router.push("/vip");
    },
    // 跳转到我的收藏界面
    collection() {
      this.$router.push("/collection");
    },
    // 跳转到我的客服界面
    service() {
      this.$router.push("/service");
    },
    // 跳转到帮助中心界面
    help() {
      this.$router.push("/help");
    },
    // 无订单
    noOrders(){
      this.$toast('暂无订单');
    }
  },

  async activated() {
    //积分图片
    let res1 = await this.API_ad();
    //积分图片
    if (res1.data.code === 200) {
      this.datass = res1.data.data;
    }

    // 积分信息
    let res2 = await this.API_userIntegral();
    // 积分信息
    if (res2.data.code === 200) {
      this.integral1 = res2.data.data;
    }

    // 收藏列表
    let Res = await this.API_collect();
    
    if (Res.data.code === 200) {
      this.collect = Res.data.data.data;
    }
  }
};
</script>

<style lang="scss" scoped>
//我的订单
.order {
  width: 100%;
  .Myorder {
    padding: 10px;
    box-sizing: border-box;
    background-color: white;
    .whole {
      margin-left: 240px;
      color: rgb(221, 221, 221);
    }
  }
  .menu {
    border-top: 1px solid rgb(236, 236, 236);
    margin-bottom: 10px;
  }
  .integral {
    width: 100%;
    background-color: white;
    .Myintegral {
      padding: 10px;
      box-sizing: border-box;
      .left {
        display: inline-block;
        width: 49%;
        margin: 0 auto;
        border-right: 1px solid black;
        p {
          text-align: center;
        }
        .num {
          color: red;
          font-size: 20px;
        }
      }
      .right {
        display: inline-block;
        width: 49%;
        margin: 0 auto;
        p {
          text-align: center;
        }
        .num {
          color: red;
          font-size: 20px;
        }
      }
    }
  }
  h1 {
    text-align: center;
    line-height: 50px;
  }
  .Todays {
    .van-image {
      height: 100%;
    }
    .shopname {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .newprice {
      margin-left: 10px;
      color: red;
      font-weight: bold;
    }
    .oldprice {
      margin-left: 5px;
      color: rgb(201, 201, 201);
    }
  }
}
</style>